<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<!-- Load jQuery from Google's CDN -->
	<!-- Load jQuery UI CSS  -->
	<link rel="stylesheet"
		href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

	<!-- Load jQuery JS -->
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<!-- Load jQuery UI Main JS  -->
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<!-- Load SCRIPT.JS which will create datepicker for input field  -->
	<h:outputScript library="default" name="js/script.js" />
</h:head>
<h:body>
	<h1>Add User Page</h1>
	<h:messages style="color:red" />
	<h:form>
		<h:panelGrid columns="3">
		Enter Your Nam:
		<h:inputText value="#{dummyManageBean.number}" id="inputNumber"
				required="true" />
			<h:message for="inputNumber" style="color:red" />
		Enter Your Date:
		<h:inputText value="#{dummyManageBean.bDate}" id="inputDate"
				styleClass="datepicker" required="true">
				<f:convertDateTime pattern="MM/dd/yyyy" />
			</h:inputText>
			<h:message for="inputDate" style="color:red" />
		</h:panelGrid>
		<h:commandButton action="result" value="Submit" />
	</h:form>
	<h:form prependId="false">

		<p:dataTable id="dataTable" var="list"
			value="#{userManagedBean.listUser}" paginator="true" rows="10"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			rowsPerPageTemplate="5,10,15">
			<f:facet name="header">
            Ajax Pagination
        </f:facet>

			<p:column>
				<f:facet name="header">
					<h:outputText value="FirstName" />
				</f:facet>
				<h:outputText value="#{list.userFirstName}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="LastName" />
				</f:facet>
				<h:outputText value="#{list.userLastName}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Address" />
				</f:facet>
				<h:outputText value="#{list.userAddress}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="PhoneNumber" />
				</f:facet>
				<h:outputText value="#{list.userPhoneNumber}" />
			</p:column>
		</p:dataTable>

	</h:form>

</h:body>
</html>
